<!--********************************************************************
* Copyright© 2000 - 2025 SuperMap Software Co.Ltd. All rights reserved.
*********************************************************************-->
<!--********************************************************************
* 该示例需要引入 
* vue-iclient (https://github.com/SuperMap/vue-iclient)
* mapbox-gl-enhance (https://iclient.supermap.io/web/libs/mapbox-gl-js-enhance/1.12.1-10/mapbox-gl-enhance.js)
*********************************************************************-->
<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="UTF-8" />
    <title data-i18n="resources.title_componentsLabelTheme_Vue"></title>
    <style>
      #main {
        margin: 0 auto;
        width: 100%;
        height: 100%;
      }
    </style>
  </head>

  <body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
    <div id="main">
      <sm-web-map :map-options="mapOptions" @load="mapIsLoaded">
        <sm-label-theme-layer
          :options="themeOptions"
          layer-name="LabelThemeLayer"
          :data="features"
          @load="layerLoaded"
          v-show="!!features.length"
        >
        </sm-label-theme-layer>
      </sm-web-map>
    </div>
    <script type="text/javascript" include="vue,bootstrap" src="../js/include-web.js"></script>
    <script
      include="iclient-mapboxgl-vue,mapbox-gl-enhance"
      src="../../dist/mapboxgl/include-mapboxgl.js"
    ></script>
    <script type="text/javascript" src="../data/themeLableData.js"></script>
    <script>
      new Vue({
        el: '#main',
        data() {
          var host = window.isLocal ? window.server : "https://iserver.supermap.io";
          var attribution =
            "<a href='https://www.mapbtyx.com/about/maps/' target='_blank'>© Mapbox </a>" +
            " with <span>© <a href='https://iclient.supermap.io' target='_blank'>SuperMap iClient</a> | </span>" +
            " Map Data <span>© <a href='http://support.supermap.com.cn/product/iServer.aspx' target='_blank'>SuperMap iServer</a></span> ";

          var features = [];
          var feat;
          for (var i = 0; i < themeData.length; i++) {
            var lonlat = themeData[i].lonLat.split(',');
            var lng = parseFloat(lonlat[0]);
            var lat = parseFloat(lonlat[1]);
            var text = themeData[i].aqi;
            feat = new mapboxgl.supermap.ThemeFeature([lng, lat, text], themeData[i]);
            features.push(feat);
          }
          return {
            mapOptions: {
              container: 'map',
              style: {
                version: 8,
                sources: {
                  'raster-tiles': {
                    attribution: attribution,
                    type: 'raster',
                    tiles: [host + '/iserver/services/map-china/rest/maps/China/zxyTileImage.png?z={z}&x={x}&y={y}'],
                    tileSize: 256
                  }
                },
                layers: [
                  {
                    id: 'simple-tiles',
                    type: 'raster',
                    source: 'raster-tiles',
                    minzoom: 0,
                    maxzoom: 22
                  }
                ]
              },
              center: [116.4, 39.79],
              zoom: 4
            },
            features,
            themeOptions: {
              //                map: map,//该可选参数将在下个版本遗弃
              attributions: ' ',
              style: new SuperMap.ThemeStyle({
                labelRect: true,
                fontColor: '#000000',
                fontWeight: 'bolder',
                fontSize: '18px',
                fill: true,
                fillColor: '#FFFFFF',
                fillOpacity: 1,
                stroke: false,
                strokeColor: '#8B7B8B'
              }),
              themeField: 'aqi',
              styleGroups: [
                {
                  start: 0,
                  end: 51,
                  style: {
                    fillColor: '#6ACD06',
                    fontSize: '17px'
                  }
                },
                {
                  start: 51,
                  end: 101,
                  style: {
                    fillColor: '#FBD12A',
                    fontSize: '19px'
                  }
                },
                {
                  start: 101,
                  end: 151,
                  style: {
                    fillColor: '#FE8800',
                    fontSize: '22px'
                  }
                },
                {
                  start: 151,
                  end: 201,
                  style: {
                    fillColor: '#FF0000',
                    fontSize: '24px'
                  }
                },
                {
                  start: 201,
                  end: 301,
                  style: {
                    fillColor: '#CC0000',
                    fontSize: '26px'
                  }
                },
                {
                  start: 301,
                  end: 601,
                  style: {
                    fillColor: '#960453',
                    fontSize: '28px'
                  }
                }
              ]
            }
          };
        },
        methods: {
          mapIsLoaded(e) {
            this.map = e.map;
          },
          updateInfoView(feature, themeLayer) {
            if (!feature && this.popup) {
              this.removePopup();
              return;
            }

            if (!this.popup) {
              this.popup = new mapboxgl.Popup({ maxWidth: 600, closeButton: false });
            }

            var statisticsData = this.getStatisticsData();
            var contentHTML =
              '<table><tbody><tr>' +
              "<td><div style='margin-left: 15px'>" +
              '<table><tbody><tr>' +
              "<td><div id='contentID' style='margin-top: 2px;margin-bottom: 2px;width:65px;height:60px;line-height:60px;text-align: center;font-size:35px;color: #ffffff;'>" +
              feature.attributes.aqi +
              '</div></td>' +
              "<td style='padding-right: 20px;'></td>" +
              '<td>' +
              "<div id='textID' style='text-align: left;font-size: 19px;text-shadow: 1px 1px 0 #ffffff;'>" +
              feature.attributes.quality +
              '</div>' +
              "<div style='font-size:10px;width:150px;'>" +
              feature.attributes.time_point +
              '</div>' +
              "<div style=' font-weight:lighter; font-size:14px;'>" +
              resources.text_currentCity +
              '：' +
              feature.attributes.area +
              '</div>' +
              '</td>' +
              '</tr> </tbody></table>' +
              "<table style='width:100%;font-size: 10px;border: 0 solid black;padding: 0;margin: 0;border-spacing: 0;'>" +
              '<tbody>' +
              '<tr>' +
              "<td style='font-weight:bold;width:45px;'></td><td style='font-weight:bold;width:51px;' align='center' nowrap='true'>Current</td>" +
              "<td  style=' font-weight:bold;width:49px;' align='center' nowrap='true'>Min</td>" +
              "<td style='font-weight:bold;width:49px;' align='center' nowrap='true'>Max</td> " +
              '</tr>' +
              "<tr style='height: 23px;'><td style='padding-left: 0;padding-right: 0'><div style='width:46px;'><span style='font-weight:bold;'>PM2.5</span></div></td>" +
              "<td style='font-size:11px;' align='center'>" +
              feature.attributes.pm2_5 +
              '</td>' +
              "<td style='color:#0086c8;font-size:11px;' align='center'>" +
              statisticsData.minNum +
              '</td>' +
              "<td  style='color:#ce3c3a;font-size:11px;' align='center'>" +
              statisticsData.maxNum +
              '</td>' +
              '</tr>' +
              "<tr style='height: 23px;'><td style='padding-left: 0;padding-right: 0'><div style='width:46px;'><span style='font-weight:bold;'>PM10</span></div></td>" +
              "<td style='font-size:11px;' align='center'>" +
              feature.attributes.pm10 +
              '</td>' +
              "<td style='color:#0086c8;font-size:11px;' align='center'>" +
              statisticsData.minpm10 +
              '</td>' +
              "<td  style='color:#ce3c3a;font-size:11px;' align='center'>" +
              statisticsData.maxpm10 +
              '</td>' +
              '</tr>' +
              "<tr style='height:23px;'><td style='padding-left: 0;padding-right: 0'><div style='width:46px;'><span style='font-weight:bold;'>O3</span></div></td>" +
              "<td style='font-size:11px;' align='center'>" +
              feature.attributes.o3 +
              '</td>' +
              "<td style='color:#0086c8;font-size:11px;' align='center'>" +
              statisticsData.minO3 +
              '</td>' +
              "<td style='color:#ce3c3a;font-size:11px;' align='center'>" +
              statisticsData.maxO3 +
              '</td></td>' +
              '</tr>' +
              "<tr style='height: 23px;'><td style='padding-left: 0;padding-right: 0'><div style='width:46px;'><span style='font-weight:bold;'>SO2</span></div></td>" +
              "<td style='font-size:11px;' align='center'>" +
              feature.attributes.so2 +
              '</td>' +
              "<td style='color:#0086c8;font-size:11px;' align='center'>" +
              statisticsData.minSO2 +
              '</td>' +
              "<td  style='color:#ce3c3a;font-size:11px;' align='center'>" +
              statisticsData.maxSO2 +
              '</td></td>' +
              '</tr>' +
              "<tr style='height: 23px;'><td style='padding-left: 0;padding-right: 0'><div style='width:46px;'><span style='font-weight:bold;'>NO2</span></div></td>" +
              "<td style='font-size:11px;' align='center'>" +
              feature.attributes.no2 +
              '</td>' +
              "<td style='color:#0086c8;font-size:11px;' align='center'>" +
              statisticsData.minNO2 +
              '</td>' +
              "<td  style='color:#ce3c3a;font-size:11px;' align='center'>" +
              statisticsData.maxNO2 +
              '</td></td>' +
              '</tr></tbody> </table></div></td></tr></tbody> </table>';

            var latLng = this.getLatLng(feature.attributes.lonLat);
            this.popup
              .setLngLat(latLng)
              .setHTML(contentHTML)
              .addTo(this.map);

            //设置弹框内容颜色
            var groups = themeLayer.styleGroups;
            for (var i = 0; i < groups.length; i++) {
              if (feature.attributes.aqi >= groups[0].start && feature.attributes.aqi < groups[0].end) {
                this.setColor('#6ACD06');
              } else if (feature.attributes.aqi >= groups[1].start && feature.attributes.aqi < groups[1].end) {
                this.setColor('#FBD12A');
              } else if (feature.attributes.aqi >= groups[2].start && feature.attributes.aqi < groups[2].end) {
                this.setColor('#FE8800');
              } else if (feature.attributes.aqi >= groups[3].start && feature.attributes.aqi < groups[3].end) {
                this.setColor('#FF0000');
              } else if (feature.attributes.aqi >= groups[4].start && feature.attributes.aqi < groups[4].end) {
                this.setColor('#CC0000');
              } else if (feature.attributes.aqi >= groups[5].start && feature.attributes.aqi < groups[5].end) {
                this.setColor('#960453');
              }
            }
          },
          getStatisticsData() {
            if (this.statisticsData) {
              return this.statisticsData;
            }
            //遍历数组，获取单个属性。组成新的数组
            var pm25 = [],
              pm10s = [],
              o3s = [],
              so2s = [],
              no2s = [];
            for (var i = 0; i < themeData.length; i++) {
              pm10s.push(themeData[i].pm2_5);
              pm25.push(themeData[i].pm10);
              o3s.push(themeData[i].o3);
              so2s.push(themeData[i].so2);
              no2s.push(themeData[i].no2);
            }
            //获取单个属性的最大最小值
            this.statisticsData = {
              maxNum: Math.max.apply(Math, pm25),
              minNum: Math.min.apply(Math, pm25),
              maxpm10: Math.max.apply(Math, pm10s),
              minpm10: Math.min.apply(Math, pm10s),
              maxO3: Math.max.apply(Math, o3s),
              minO3: Math.min.apply(Math, o3s),
              maxSO2: Math.max.apply(Math, so2s),
              minSO2: Math.min.apply(Math, so2s),
              maxNO2: Math.max.apply(Math, no2s),
              minNO2: Math.min.apply(Math, no2s)
            };
            return this.statisticsData;
          },
          setColor(color) {
            document.getElementById('contentID').style.backgroundColor = color;
            document.getElementById('textID').style.color = color;
          },
          getLatLng(latLng) {
            var latLng = latLng.split(',');
            return [parseFloat(latLng[0]), parseFloat(latLng[1])];
          },
          layerLoaded(themeLayer) {
            themeLayer.on('mousemove', function(e) {
              this.handleMouseOver(themeLayer, e);
            }.bind(this));
          },
          handleMouseOver(themeLayer, e) {
            if (e.target && e.target.refDataID) {
              var fid = e.target.refDataID;
              var fea = themeLayer.getFeatureById(fid);
              if (fea) {
                this.updateInfoView(fea, themeLayer);
              }
            } else {
              this.removePopup();
            }
          },
          removePopup() {
            this.popup && this.popup.remove(this.map);
          }
        }
      });
    </script>
  </body>
</html>
